<template>
  <view class="page_index">
    <!-- #ifdef MP -->

    <!-- #endif -->
	
	 <view class="title_home">
	 	<view class="title_sorq">
	 		<view class="title_q" @click="selectserviceObj">
	 			
	 			<text>{{serviceObj==1?"喵星人":"汪星人"}}</text>
				<image src="/static/images/qh.png" ></image>
	 		</view>
			<view class="title_s">
				<image src="/static/images/search.png" ></image>
				<text>{{serviceObj==1?"猫猫主粮":"狗狗主粮"}}</text>
			</view>
	 	</view>
		<view class="title_k">
			<u-tabs :list="tablist" lineWidth="0"
    lineHeight="0" :activeStyle="{
	    color: '#FFFFFF',
		fontSize:'30rpx',
		transform: 'scale(1.4) translateY(-6rpx)'
		
	}" :inactiveStyle="{
	        color: '#FFFFFF',
	        fontSize:'30rpx',
	    }" @click="tabclick" :current="tabcurrent">
			        <view
			                slot="right"
			                style="padding-left: 4px;font-size: 30rpx;color: #FFFFFF"
			                @tap="clickfun"
							class="title-sort"
			        >
			            <u-icon
			                    name="list"
			                    size="22"
								color="#FFFFFF"
			                    bold
			            ></u-icon>
						<text>分类</text>
			        </view>
			    </u-tabs>
		</view>
	 </view>
    <view
      class="page_content"
     
      v-if="navIndex == 0"
    >
	
	
  
	 
      <view class="swiper" v-if="imgUrls.length">
        <swiper
          indicator-dots="true"
          :autoplay="true"
          :circular="circular"
          :interval="interval"
          :duration="duration"
          indicator-color="rgba(255,255,255,0.6)"
          indicator-active-color="#fff"
          @change="bindchangeFn"
        >
          <block v-for="(item, index) in imgUrls" :key="index">
            <swiper-item>
				
              <navigator
                
                class="slide-navigator acea-row row-between-wrapper"
                hover-class="none"
              >
                <image
                 :src="httpUrlFn(item.image)"
                  class="slide-image"
                  lazy-load
                ></image>
              </navigator>
            </swiper-item>
          </block>
        </swiper>
      </view>
	  
	  
	  <!-- 商品秒杀和优惠 -->
	  <!-- <view class="activity">
		  <view class="activity-ms">
		  	<view class="activityitem">
		  		<image src="https://img.zcool.cn/community/0196a155b322646ac725ca504a8a12.jpg@1280w_1l_2o_100sh.jpg" ></image>
		  	</view>
			<view class="activityitem">
				<image src="https://img.zcool.cn/community/0196a155b322646ac725ca504a8a12.jpg@1280w_1l_2o_100sh.jpg" ></image>
			</view>
		  </view>
		  <view class="activity-nz">
		  	<view class="activityitem swiper-str">
				<swiper
				  indicator-dots="true"
				  :autoplay="true"
				  :circular="circular"
				  :interval="interval"
				  :duration="duration"
				  indicator-color="rgba(0, 0, 0, 0.6)"
				  indicator-active-color="#AAAAAA"
				  @change="bindchangeFn"
				>
				  <block v-for="(item, index) in imgUrls" :key="index">
				    <swiper-item>
						
				      <navigator
				        
				        class="slide-navigator acea-row row-between-wrapper"
				        hover-class="none"
				      >
				        <image
				          :src="httpUrlFn(item.image)"
				          class="slide-image"
				          lazy-load
				        ></image>
				      </navigator>
				    </swiper-item>
				  </block>
				</swiper>
		  	</view>
			<view class="activityitem activityitem-arr">
				<view class="activityitem-nz">
					<image src="https://img0.baidu.com/it/u=773083171,1721278908&fm=253&fmt=auto&app=138&f=JPEG?w=454&h=283" ></image>
				</view>
				<view class="activityitem-q">
					<image src="https://img0.baidu.com/it/u=3050568905,1585633762&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=753"></image>
				</view>
			</view>
		  </view>
	  	
	  </view> -->
	  
	<!-- 抢购 -->
	  <view class="good-qg" v-if="false">
	  	<view class="good-item"  v-for="(item, index) in listRecords"
          :key="index"  @click="shoppingFn(item, index)">
	  		<view class="good-item-img">
	  			<image :src="item.dataSource==1? item.image:httpUrlFn(item.image)" ></image>
	  		</view>
			<view class="good-item-k">
				<view class="good-item-title">
					{{item.name}}
				</view>
				<!-- <view class="good-item-content">
					全新工艺 锁住营养
				</view> -->
				<view class="good-item-content">
					<text>商品原价</text><text class="shop-originalPrice">￥{{item.originalPrice}}</text>
				</view>
				
				<view class="good-item-mony">
					<text>商城特惠价</text>
					<!-- <text class="good-item-mony-t">￥</text>
					<text class="good-item-mony-num good-item-mony-yjnum">{{item.originalPrice}}</text> -->
					<text class="good-item-mony-t">￥</text>
					<text class="good-item-mony-num">{{item.salePrice}}</text>
				</view>
				<view class="good-item-pay">
					点击抢购
				</view>
			</view>
			
	  	</view>
		<!-- <view class="good-item">
			<view class="good-item-img">
				<image src="https://img2.baidu.com/it/u=1135721109,560447139&fm=253&fmt=auto&app=138&f=JPEG?w=408&h=612" ></image>
			</view>
			<view class="good-item-k">
				<view class="good-item-title">
					冠能成年期全价犬粮
				</view>
				<view class="good-item-content">
					全新工艺 锁住营养
				</view>
				<view class="good-item-mony">
					<text>商城特惠价</text>
					<text class="good-item-mony-t">￥</text>
					<text class="good-item-mony-num">29.8</text>
				</view>
				<view class="good-item-pay">
					点击抢购
				</view>
			</view>
		</view> -->
	  </view>
	  
 

      <!-- 首发新品 -->
      <view class="shopping_"  v-if="true">
        <view
          class="item_"
          v-for="(item, index) in listRecords"
          :key="index"
          mode="aspectFit"
          @click="shoppingFn(item, index)" 
        >
          <view class="image_">
            <image :src="item.dataSource==1? item.image:httpUrlFn(item.image)" mode="aspectFit" />
          </view>
          <view class="info_">
			  <view class="text_ text_name">{{ item.name }}</view>
            <!-- <view class="text_ ">别名:{{ item.aliasName }}</view> -->
            <!-- <view class="sold_number">已售{{ item.sales }}</view> -->
			<!-- <view class="comment_tag">
				<view class="comment_tag_lb" v-if="item.channelId===2">
					<view >
						礼包商品
					</view> 
				</view>
				<view class="commission_" v-if="item.CommissionToggle">
				  <view> 佣金:￥{{ item.CommissionToggle }} </view>
				</view>
			</view> -->
           
            <view class="money_wrapper">
              <view class="money_" >
                <view class="money_1"
                  >￥<text>{{ item.salePrice }}</text> </view
                >
                <view class="money_2">
					<image src="/static/images/icom-add.png" ></image>
				</view>
              </view>
            </view>
          </view>
        </view>
      </view>
	  
	  
	  
	  
      <u-loadmore
        :status="status"
        :icon-type="iconType"
        :load-text="loadText"
        @loadmore="loadNextFn"
      />
      <AuthorizationPopup ref="authRef"></AuthorizationPopup>
	  
    </view>
    <ls-skeleton :round="true" :skeleton="skeleton" :loading="loading">
    </ls-skeleton>
	
	
	<u-tabbar
		:value="tabbarvalue"
		@change="name => tabbarvalue = name"
		:fixed="true"
		:placeholder="true"
		:safeAreaInsetBottom="true"
		class="u-tab-bar"
		activeColor="#EFE281"
		inactiveColor="#FFFFFF"
	>
	<view class="cat-img">
		<image src="/static/images/cat.png" ></image>
	</view>
	<view class="dog-img">
		<image src="/static/images/dog.png" ></image>
	</view>
		<u-tabbar-item text="首页" icon="home" @click="tabbarselect"></u-tabbar-item>
		<u-tabbar-item text="门店" icon="photo" @click="tabbarselect"></u-tabbar-item>
		<u-tabbar-item text=" " @click="tabbarselect">
			<view class="select" slot="active-icon">
				<image
							class="u-page__item__slot-icon"
							src="/static/images/index.png"
						></image>
			</view>
			<view class="noselect" slot="inactive-icon">
				<image
							class="u-page__item__slot-icon"
							src="/static/images/index.png"
						></image>
			</view>
			
		</u-tabbar-item>
		<u-tabbar-item text="活动" icon="play-right" @click="tabbarselect"></u-tabbar-item>
		<u-tabbar-item text="我的" icon="account" @click="tabbarselect"></u-tabbar-item>
		
	</u-tabbar>
	
	
  </view>
</template>

<script>
import AuthorizationPopup from "@/components/AuthorizationPopup/index";
import { mapGetters } from "vuex";
// import { getShopPing } from "@/api/shopping/index";
import { BASE_URL_IMAHE } from "../../../utils/https";
// import { bannerList } from "@/api/banner";
import { getHomePage,getTypeList,getGoodsListPage } from "@/api/index/index";

var statusBarHeight = uni.getSystemInfoSync().statusBarHeight?uni.getSystemInfoSync().statusBarHeight + "px":"30rpx";
console.log("uni.getSystemInfoSync()",uni.getSystemInfoSync())

let app = getApp();
export default {
  name: "index.vue",
  // computed: mapGetters(["isLogin"]),
  components: {
    AuthorizationPopup,
  },

  onLoad() {
    var that = this;
    let self = this;
    // #ifdef MP
    // 获取小程序头部高度
    this.navH = app.globalData.navHeight;
	
    console.log(this.navH, "获取小程序头部高度");
    let info = uni.createSelectorQuery().select(".mp-header");
    info
      .boundingClientRect(function (data) {
        self.marTop = data.height;
        self.poTop = Number(data.height) + 84;
      })
      .exec();
    // #endif
    // #ifndef MP
    this.navH = 0;
    // #endif
	
	  this.marTop = (30+88)+"rpx";
	  
	  console.log(" this.listdate.v", this.listdate.v)
	   
  },
  /**
   * 分享当前页面
   */
  onShareAppMessage(e) {
    console.log(e, "分享");
    return {
      title: "一个兴趣社交购物平台",
      imageUrl:
        BASE_URL_IMAHE +
        "file/test/productImage/20230710/285ce91ce9774534b5c57947ca7c96c9.jpg",
      path: `/pages/index/index?parentInviteCode=${
        uni.getStorageSync("phoneNumber") || ""
      }`,
    };
  },
  onShow() {
	  uni.hideTabBar()
	  this.tabbarvalue=0
	  
	  this.serviceObj=app.globalData.data.serviceObj
    // this.bannerList();
    // console.log("22",app);
    let self = this;
    
    if (uni.getStorageSync("token")) {
      this.$refs.authRef.cancel();
    }
    // setTimeout(() => {
    //   if (!uni.getStorageSync("token") && !uni.getStorageSync("modal")) {
    //     //第一次进入弹窗
    //     this.$refs.authRef.showToggle();
    //     uni.setStorageSync("modal", true);
    //   }
    // }, 1000);

    this.userInfoServer = uni.getStorageSync("userInfoServer") || "";
	this.listdate.v=uni.getStorageSync("v")?uni.getStorageSync("v"):''
	this.listdate.userId=uni.getStorageSync("userId")?uni.getStorageSync("userId"):""
    // this.getShopPingApi();
    this.listPage();
  },
  data() {
    return {
		tabbarvalue: 0,
		tabcurrent:0,
		tablist:[{
                    name: '综合',
                }, {
                    name: '猫咪主粮',
                }, {
                    name: '猫咪零食'
                }, {
                    name: '保健护理'
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工撒大'
                }],
		
      loading: true,
      skeleton: [
        "line-sm*3",
        40,
        "card",
        "circlesm*2",
        "line",
        "card-lg",
        40,
        "news",
        "line-sm*3+square",
      ],
      userInfoServer: "",
      status: "loadmore",
      iconType: "flower",
      loadText: {
        loadmore: "点击加载更多",
        loading: "正在加载，请喝杯茶...",
        nomore: "哼~😕我也是有底线的~",
        //哼~😕我也是有底线的~
        //😕我也是有底线的~
      },
      statusBarHeight: statusBarHeight,
      marTop: 0,
      navH: "",
      site_name: "", //首页title
      navIndex: 0,
      mpHeaderColor: "#D8E7FC",
      iSshowH: true,
      imgUrls: [],
      //是否采用衔接滑动，即播放到末尾后重新回到开头
      circular: true,
      //自动切换时间间隔
      interval: 3000,
      duration: 500, // 下划线动画时长
      //当前页码
      pageNo: 1,
      //每页数量
      // size: 10,
	  typeId:"",
	  pageSize: 20,
      //列表
      listRecords: [],
      //轮播图index
      currentSwiper: "/static/images/header_bac_1.png",
	  listdate:{
		  v:'',
		  userId:''
	  },
	  serviceObj:1,
	  
    };
  },
  //上拉
  onReachBottom() {
    console.log("触发上拉加载");
    this.getShopPingApi();
  },
  methods: {
	  clickfun(){
		  console.log("先")
		  uni.navigateTo({
		  	url:"/pages/subpackage/goodclass/index"
		  })
	  },
	  tabclick(item){
		  this.typeId=item.id
		  this.getGoodsListPage()
		  console.log('item', item);
	  },
	  selectserviceObj(){
		this.serviceObj=this.serviceObj==1?2:1
		app.globalData.data.serviceObj=this.serviceObj
		this.listPage()
	  },
	  // click1(e) {
	  // 	console.log('click1', e);
	  // },
	  gocar(){
	  		  console.log('22323')
	  		  uni.navigateTo({
	  		    url: `/pages/subpackage/collect/index`,
	  		  });
	  },
	async getGoodsListPage(typeId){
		 let res= await getGoodsListPage({serviceObj:this.serviceObj,typeId:this.typeId,pageNo:this.pageNo,pageSize:this.pageSize})
		 if (res.result == 0) {
			 console.log(res)
			 this.listRecords=res.page.list
			 
		 }
		
	},
    async listPage() {
      // Promise.all([ this.getShopPingApi()]).finally(
      //   () => (this.loading = false)
      // );
	   let res= await getHomePage({serviceObj:this.serviceObj})
	   let resTypeList= await getTypeList({serviceObj:this.serviceObj})
	   // let res= await getTypeList({serviceObj:this.serviceObj})
	   
	   
	   if (resTypeList.result == 0) {
		this.tablist=[]
	     // this.tablist= res.typeList
		 this.tablist=[{name:"综合",id:""},...res.typeList]
	   	this.typeId=""
		this.tabcurrent=0
	   		 
	   }
	  
	   if (res.result == 0) {
	     this.imgUrls= res.homeBanner
		 console.log(res.homeBanner)
		 // this.listRecords=res.goodsList
		 console.log(this.imgUrls,res.bannerImage,"res.bannerImage")
	     uni.hideLoading();
		
		 this.loading = false
	   }
	    this.getGoodsListPage()
    },

    //banner图 列表
    async bannerList() {
      const res = await bannerList(1);
      if (res.code === 0) {
        this.imgUrls = res.data;
        uni.hideLoading();
      }
    },

    httpUrlFn(item) {
      return  BASE_URL_IMAHE + item ;
    },

    //轮播图
    bindchangeFn(e) {
		return
      if (e.detail.current) {
        this.currentSwiper = `/static/images/header_bac_${
          e.detail.current + 1
        }.png`;
        const current = e.detail.current + 1;
        if (current === 1) {
          this.mpHeaderColor = "#D8E7FC";
        } else if (current === 2) {
          this.mpHeaderColor = "#F1E0C9";
        } else if (current === 3) {
          this.mpHeaderColor = "#E4E5E0";
        } else {
          this.mpHeaderColor = "#D8E7FC";
        }
      } else {
        this.currentSwiper = `/static/images/header_bac_1.png`;
        this.mpHeaderColor = "#D8E7FC";
      }
    },
	gologin(){
		if (!uni.getStorageSync("userId")) {
		  // 弹窗告诉用户去登录
		  uni.showModal({
		    title: "温馨提示",
		    content: "此时此刻需要您登录喔~",
		    // showCancel: false,
		    confirmText: "去登录",
		    cancelText: "再逛会",
		    success: (res) => {
		      if (res.confirm) {
		        uni.navigateTo({
		          url: "/pages/empower/mp-weixin",
		        });
		      }
		      
		      
		    },
		  });
				return
		}
	},

    shoppingFn(item, index) {
      // console.log(item, "item 商品");
      // console.log(index, "index");
	  // return
	 
	  
      uni.navigateTo({
        url: `/pages/subpackage/goods/detail?goodsId=${item.id}`,
      });
    },

    //礼包
    giftFn() {
      console.log("点击了礼包");
      uni.navigateTo({
        url: "/pages/subpackage/service/index",
      });
    },
    //积分
    pointsFn() {
      console.log("点击了积分");
      uni.navigateTo({
        url: "/pages/subpackage/contact/index",
      });
    },

    //普通、商品列表
    async getShopPingApi() {
      this.status = "loading";
      const params = {
        current: this.current,
        size: this.size,
        channelId: '',
      };
    
	// setTimeout(() => {
	//   this.status = "loadmore";
	// }, 800);
	
	setTimeout(() => {
	  this.status = "nomore";
	}, 800);
	return;

    },

    //点击组件触发上拉加载
    loadNextFn() {
      console.log("点击组件触发上拉加载2123");
      // this.getShopPingApi();
    },
	//底部导航栏切换
	tabbarselect(e){
		
		switch (this.tabbarvalue){
			case 0:
			uni.switchTab({
				url:"/pages/index/index"
			})
				break;
			case 1:
			uni.switchTab({
				url:"/pages/goods_cate/goods_cate"
			})
				break;
			case 2:
			uni.navigateTo({
				url:"/pages/subpackage/viewwbehtml/index"
			})
				break;
			case 3:
			uni.switchTab({
				url:"/pages/share/share"
			})
				break;
			case 4:
			uni.switchTab({
				url:"/pages/user/index"
			})
				break;
			default:
				break;
		}
		
	},
  },
};
</script>

<style scoped lang="scss">
.page_index {
  background-color: #F5F5F5 !important;
  min-height: 100vh;
  padding-bottom: rpx(16);
  　　padding-bottom: constant(safe-area-inset-top);  // 顶部安全区
  　　padding-bottom: env(safe-area-inset-top);    // 顶部安全区
  　　padding-bottom: constant(safe-area-inset-bottom);  // 底部安全区
  　　padding-bottom: env(safe-area-inset-bottom);    // 底部安全区
  　　box-sizing: content-box;
}

/* #ifdef MP */
.mp-header {
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  /* #ifdef H5 */
  padding-bottom: rpx(20);
  /* #endif */
  //background-color: $theme-color;
  .sys-head {
    //background: pink;
  }
  .serch-box {
    //background: pink;
  }
  .serch-wrapper {
    height: 100%;
    align-items: center;

    .logo {
		display: flex;
		justify-content: center;
      image {
        width: rpx(102);
        height: rpx(44);
        vertical-align: middle;
        // margin-left: rpx(16);
      }
    }

    .input {
      display: flex;
      align-items: center;
      /* #ifdef MP */
      width: rpx(305);
      /* #endif */
      height: rpx(50);
      padding: 0 0 0 rpx(30);
      background: rgba(247, 247, 247, 1);
      border: 1px solid rgba(241, 241, 241, 1);
      border-radius: rpx(29);
      color: #bbbbbb;
      font-size: rpx(28);

      .iconfont {
        margin-right: rpx(20);
      }
    }
  }
}


.mp-bg {
  position: absolute;
  left: 0;
  /* #ifdef H5 */
  top: rpx(49);
  /* #endif */
  width: 100%;
  //background: linear-gradient(180deg, #e93323 0%, #f5f5f5 100%, #751a12 100%);
  // border-radius: 0 0 30rpx 30rpx;
}
.mp_bg_img {
  width: 100%;
  vertical-align: middle;
  position: absolute;
  left: 0;
  /* #ifdef H5 */
  top: rpx(49);
  z-index: -99;
  /* #endif */
}

/* #endif */

.title_home{
	width: 750rpx;
	height: 256rpx;
	background: #EB5F3F;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	display: flex;
	// justify-content: center;
	align-items: center;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 100;
	
	
	.title_sorq{
		display: flex;
		justify-content: start;
		
		.title_q{
			width: 184rpx;
			height: 72rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 35rpx;
			margin-left: 27rpx;
			margin-right: 22rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
			text{
				font-size: 34rpx;
				color: #EB5F3F;
				line-height: 48rpx;
				// margin-left: 24rpx;
			}
		}
		.title_s{
			width: 268rpx;
			height: 72rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			// justify-items: center;
			
			image{
				width: 30rpx;
				height: 30rpx;
				margin-left: 23rpx;
			}
			text{
				font-size: 27rpx;
				font-weight: normal;
				color: #B3B3B3;
				line-height: 38rpx;
				margin-left: 24rpx;
			}
		}
	}
	.title_k{
		position: absolute;
		bottom: -15rpx;
		padding: 0 39rpx;
		width: 750rpx;
		box-sizing: border-box;
		.title-sort{
			display: flex;
			justify-content: center;
		}
	}
}


.activity{
	max-width: 710rpx;
	padding: 4rpx 0rpx 18rpx;
	margin: 0 auto;
	.activity-ms{
		width: 100%;
		display: flex;
		justify-content: space-between;
		.activityitem{
			width: 339rpx;
			height: 282rpx;
			background: #000000;
			opacity: 1;
			border-radius: 25rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.activity-nz{
		margin-top: 23rpx;
		display: flex;
		justify-content: space-between;
		
		.activityitem-arr{
			width: 339rpx;
			// height: 489rpx;
			opacity: 1;
			border-radius: 25rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
				
			.activityitem-nz,.activityitem-q{
				width: 100%;
				height: 234rpx;
				overflow: hidden;
				border-radius: 25rpx;
				margin-bottom: 29rpx;
			}
		}
		.swiper-str{
			// overflow: hidden;
			width: 339rpx;
			height: 509rpx;
			position: relative;
			  swiper,.swiper-item{
				  height: 509rpx;
			  }
			   image {
			    width: 100%;
			    height: 469rpx;
			    border-radius: rpx(5);
			  }
			
		}
	}
}
.good-qg{
	max-width: 710rpx;
	padding: 4rpx 0rpx 0rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.good-item{
		width: 342rpx;
		margin-bottom: 30rpx;
		.good-item-img{
			width: 329rpx;
			height: 218rpx;
			margin: 0 auto;
			image{
				width: 100%;
				height: 100%;
				border-radius: 25rpx 25rpx 0rpx 0rpx;
				
			}
		}
		
			
		.good-item-k{
			position: relative;
			width: 342rpx;
			height: auto;
			background: linear-gradient(175deg, #EF7C1C 0%, #D6511D 41%, #C32C20 79%, #BC1B21 100%);
			margin-top: -20rpx;
			// z-index: 2;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			padding-top: 35rpx;
			padding-bottom: 20rpx;
			.good-item-title{
				text-align: center;
				width: 100%;
				box-sizing: border-box;
				padding: 0 20rpx;
				overflow: hidden;
				    white-space: nowrap;
				    text-overflow: ellipsis;
				font-size: 33rpx;
				// font-family: 'MiSans, 'MiSans;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 46rpx;
			}
			.good-item-content{
				font-size: 25rpx;
				// font-family: 'MiSans, 'MiSans;
				// font-weight: normal;
				text-align: center;
				width: 100%;
				box-sizing: border-box;
				padding: 0 20rpx;
				overflow: hidden;
				    white-space: nowrap;
				    text-overflow: ellipsis;
				color: #FFFFFF;
				line-height: 35rpx;
					
				.shop-originalPrice{
					text-decoration: line-through;
				}
			}
			.good-item-mony{
				font-size: 25rpx;
				color: #FFFFFF;
				line-height: 35rpx;
				vertical-align:text-bottom;
				text-align: center;
				.good-item-mony-t{
					font-size: 19rpx;
					color: #FFFFFF;
					line-height: 27rpx;
					margin-left: 5rpx;
				}
				
				.good-item-mony-num{
					font-size: 34rpx;
					color: #FFFFFF;
					line-height: 48rpx;
				}
				.good-item-mony-yjnum{
					text-decoration: line-through;
				}
			}
			.good-item-pay{
				width: 209rpx;
				height: 42rpx;
				background: #FFFFFF;
				opacity: 1;
				margin: 0 auto;
				margin-top: 7rpx;
				border-radius: 50rpx;
				text-align: center;
				font-size: 25rpx;
				color: #BC1B21;
				line-height: 42rpx;
			}
		}
		
	}
}

// h5
.mp-header {
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  //background-color: $theme-color;
  .sys-head {
    //background: pink;
  }
  .serch-box {
    //background: pink;
	height: rpx(44);
  }
  .serch-wrapper {
    height: 100%;
    align-items: center;

    .logo {
		display: flex;
		justify-content: center;
      image {
        width: rpx(102);
        height: rpx(44);
        vertical-align: middle;
        // margin-left: rpx(16);
      }
    }

    .input {
      display: flex;
      align-items: center;
      width: rpx(305);
      height: rpx(50);
      padding: 0 0 0 rpx(30);
      background: rgba(247, 247, 247, 1);
      border: 1px solid rgba(241, 241, 241, 1);
      border-radius: rpx(29);
      color: #bbbbbb;
      font-size: rpx(28);

      .iconfont {
        margin-right: rpx(20);
      }
    }
  }
}

.mp-bg {
  position: absolute;
  left: 0;
  width: 100%;
  //background: linear-gradient(180deg, #e93323 0%, #f5f5f5 100%, #751a12 100%);
  // border-radius: 0 0 30rpx 30rpx;
}
.mp_bg_img {
  width: 100%;
  vertical-align: middle;
  position: absolute;
  left: 0;
}

// cs

.swiper {
  position: relative;
  width: 100%;
  padding: 18rpx 20rpx 18rpx;
  border-radius: rpx(5);
  //overflow: hidden;
  /* #ifdef MP */
  z-index: 10;
  /* #endif */
  swiper,
  .swiper-item,
  image {
    width: 100%;
    height: 369rpx;
    border-radius: rpx(5);
  }
}





.shopping_ {
  margin: rpx(0) auto;
  display: flex;
  flex-wrap: wrap;
  max-width: rpx(351);
  justify-content: space-between;
  //background: pink;
  > .item_ {
    width: rpx(170);
    display: flex;
    flex-direction: column;
    margin-bottom: rpx(8);
    //background: #ffffff;
    border-radius: rpx(5);
    position: relative;
    // overflow: hidden;	
    > .image_ {
      height: auto;
      background: #fafafa;
      // border-top-left-radius: rpx(5);
      // border-top-right-radius: rpx(5);
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
	  border-radius: rpx(5);
      image {
        vertical-align: middle;
        height: rpx(170);
        width: 100%;
        //width: rpx(98);
        //height: rpx(132);
      }
    }
    > .info_ {
      // position:absolute;
      // bottom: rpx(0);
      // left: 0;
      // right: 0;
      padding: rpx(6) rpx(10) rpx(10);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      background:rgba(255,255,255,0.98);
      border: rpx(1) solid #ffffff;
      //opacity: 0.8;
      > .text_ {
        margin-bottom: rpx(2);
        //width: rpx(150);
        //height: rpx(36);
		width: 100%;
        overflow: hidden;
        display: -webkit-box;	
        -webkit-box-orient: vertical;
		// white-space: nowrap;
		// text-overflow: ellipsis;
        -webkit-line-clamp: 2; /*最大行数*/
      }
	  >.text_name{
		  font-weight: bold;
	  }
      > .sold_number {
        font-size: rpx(12);
        font-weight: 400;
        color: #888888;
      }
		  
	  > .comment_tag{
		 display: flex;
		 
			 
		  > .comment_tag_lb{
			  display: flex;
			  margin-right: rpx(5);
			  margin-top: rpx(10);
			  > view {
			    min-width: rpx(59);
			    background: rgba(255, 66, 26, 1);
			    border-radius: rpx(2);
			    border: rpx(1) solid #fa5151;
			    font-size: rpx(10);
			    font-weight: 400;
			    color: #FFFFFF;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    padding: rpx(1) rpx(3) rpx(1) rpx(3);
			    margin-bottom: rpx(6);
			  }
		   }
		 
		  > .commission_ {
		    display: flex;
			margin-top: rpx(10);
		    > view {
		      min-width: rpx(59);
		      background: rgba(250, 81, 81, 0.1);
		      border-radius: rpx(2);
		      border: rpx(1) solid #fa5151;
		      font-size: rpx(10);
		      font-weight: 400;
		      color: #fa5151;
		      display: flex;
		      justify-content: center;
		      align-items: center;
		      padding: rpx(1) rpx(3) rpx(1) rpx(3);
		      margin-bottom: rpx(6);
		    }
		  }
		  
	  }
     
      > .money_wrapper {
        display: flex;
        justify-content: space-between;
		flex-wrap: wrap;
        margin-top: rpx(11);
        > .money_ {
          display: flex;
          align-items: center;
		  justify-content: space-between;
		  width: 100%;
		  box-sizing: border-box;
		  
          > .money_1 {
			 
            margin-right: rpx(4);
            font-size: rpx(11);
            font-weight: bold;
            color: #fa5151;
            > text {
              font-size: rpx(15);
            }
			.back_s{
				color: #888888;
				font-size: rpx(8);
				font-weight: normal;
			}
          }
		  
          > .money_2 {
            font-size: rpx(11);
            font-weight: 400;
            color: #b2b2b2;
            text-decoration: line-through;
            margin-top: rpx(5);
			image{
				width: 36rpx;
				height: 36rpx;
				
			}
          }
        }
        //> .sold_number {
        //  font-size: rpx(12);
        //  font-weight: 400;
        //  color: #888888;
        //}
        > .purchase_wrapper {
          padding: rpx(4) rpx(4);
		  
          // background: rgba(255, 255, 255, 0.6);
          border-radius: rpx(3);
          // border: rpx(1) solid #b2b2b2;
          font-size: rpx(15);
          font-weight: 400;
          color: #fa5151;
        }
      }
    }
  }
}



.u-tab-bar{
	padding-top: 30rpx;
	// position: relative;
}
// 底部导航栏样式
.select{
	position: absolute;
	bottom: -30rpx;
	display: flex;
	justify-content: center;
}
.noselect{
	position: absolute;
	bottom: -30rpx;
	display: flex;
	justify-content: center;
}
.u-page__item__slot-icon{
	width: 156rpx;
	height: 156rpx;
	margin: 0 auto;
	// padding-bottom: 20rpx;
}
.cat-img{
	position: absolute;
	top: -50rpx;
	left: 116rpx;
	image{
		width: 89rpx;
		height: 92rpx;
	}
}
.dog-img{
	position: absolute;
	top: -53rpx;
	right: 112rpx;
	image{
		width: 80rpx;
		height: 106rpx;
	}
}

</style>
